<template>
    <div class="form-block-inner">
        <Form :model="formItem" label-position="top" ref="baseForm" :rules="ruleCustom">
            <div class="title-style">基本信息</div>
            <Row :gutter="16" >
                <Col span="6">
                    <FormItem prop="name" label="姓名:">
                        <div class="form-element">
                            <Input v-model="formItem.name" placeholder="请输入人员姓名"/>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="sex" label="性别:">
                        <RadioGroup v-model="formItem.sex">
                            <Radio label="1" border>男</Radio>
                            <Radio label="0" border>女</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="idcard" label="身份证号:">
                        <div class="form-element">
                            <div class="form-element">
                                <Input v-model="formItem.idcard" placeholder="请输入身份证号"/>
                            </div>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="tui_xiu_date" label="退休时间:">
                        <div class="form-element">
                            <DatePicker format="yyyy年MM月dd日" type="date" v-model="formItem.tui_xiu_date"
                                        style="width: 100%">
                            </DatePicker>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="work_name" label="单位名称:" >
                        <div class="form-element">
                            <div class="form-element">
                                <Input v-model="formItem.work_name" placeholder="请输入单位名称"/>
                            </div>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="养老保险编号:" prop="yang_lao_no">
                        <div class="form-element">
                            <div class="form-element">
                                <Input v-model="formItem.yang_lao_no" placeholder="请输入单位养老保险编号"/>
                            </div>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="单位所属社保分中心:" prop="she_bao_zhong_xin">
                        <div class="form-element">
                            <div class="form-element">
                                <Input v-model="formItem.she_bao_zhong_xin" placeholder="请输入单位所属社保分中心"/>
                            </div>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="li_shu_guan_xi" label="单位社会保险隶属关系:">
                        <Select v-model="formItem.li_shu_guan_xi" style="width:100%">
                            <Option value="1"> 市保</Option>
                            <Option value="2"> 省保（中直）</Option>
                            <Option value="3"> 省保（省直）</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>

            <div class="title-style">影印文件</div>
            <common-files-upload :show-files-list="fileList" @result="resultAction"></common-files-upload>
            <common-save-btn ref="commonSaveBtn" v-if="false"></common-save-btn>
        </Form>
    </div>
</template>

<script>
import CommonSaveBtn from '@/components/common-save-btn/index'
import CommonFilesUpload from '@/components/comon-files-upload/index'

export default {
  name: 'LvLiInfo',
  components: { CommonFilesUpload, CommonSaveBtn },
  props: {
    formItem: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    const checkidcard = (rule, value, callback) => {
      if (!this.$common.identityCodeValid(value)) {
        callback(new Error('身份证号不合法！'))
      } else {
        callback()
      }
    }
    const checkname = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('姓名不能为空！'))
      } else {
        callback()
      }
    }
    const checktui_xiu_date = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('退休时间不能为空！'))
      } else {
        callback()
      }
    }
    const checkwork_name = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('工作单位不能为空！'))
      } else {
        callback()
      }
    }
    return {
      fileList: [
        {
          name: '干部履历表、职工登记表、简历表、履历登记表(1-1-1-1至1-1-1-100)',
          value: '',
          key: { a: 1, b: 1 },
          desc: '如果有多本，第一本的第一页命名为1-1-1-1最后一页如果是5命名为1-1-1-5.第二本第一页命名为1-1-2-1最后一页如果是5命名为1-1-2-5\t\t\n'
        },
        { name: '从事革命活动的简历材料（1-2-1-1至1-2-1-100）', value: '', key: { a: 1, b: 2 } },
        { name: '其他由本人填写的个人经历情况（1-3-1-1至1-3-1-100）', value: '', key: { a: 1, b: 3 } }
      ],
      date: '',
      ruleCustom: {
        name: [
          { validator: checkname, trigger: 'blur' }
        ],
        idcard: [
          { validator: checkidcard, trigger: 'blur' }
        ],
        work_name: [
          { validator: checkwork_name, trigger: 'blur' }
        ],
        tui_xiu_date: [
          { validator: checktui_xiu_date, trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    }
  },
  watch: {
    formItem (data) {
      console.log('监听formItem')
      this.fileList[0].value = data.one_one
      this.fileList[1].value = data.one_two
      this.fileList[2].value = data.one_three
      this.date = data.tui_xiu_date
      this.dateZh()
    }

  },
  methods: {
    resultAction (data) {
      this.formItem.one_one = data[0].value
      this.formItem.one_two = data[1].value
      this.formItem.one_three = data[2].value
    },
    dateZh () {
      var time = new Date(this.date)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      this.formItem.tui_xiu_date = y + '-' + m + '-' + d
    }
  }
}
</script>

<style scoped>
    .form-block-inner >>> .ivu-radio-group {
        display: block;
    }
</style>
